<script setup lang="ts">
import { onMounted } from 'vue'
import { throttle } from 'vue-cache-optimization'

const onScroll = (e: any) => {
  console.log('layout scroll...', e.scrollbarYTop)
}
// perfectScrollbar 滚动条没有被打包进去
const throttleOnSrcoll = throttle(onScroll, 1000, true)

onMounted(() => {
})

</script>

<template>
  <div>
    <div>TestScroll</div>
    <div class="main" v-scroll="throttleOnSrcoll">
      <div>throttle 节流,每1000毫秒触发一次,第三个参数是先执行一次</div>
      <div v-for="item in 1000">{{ item }}</div>
    </div>
  </div>
</template>

<style>
.main {
  overflow: hidden;
  position: relative;
  height: 300px;
  border: 1px solid #ccc;
}
</style>
